<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
	
	<img src="images/zgl.jpg"/>
	
	<input id="hide" type="button" value="隐藏" style="position:absolute;top:250;left:50"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
	<input id="show" type="button" value="显示" style="position:absolute;top:250;left:120"/>
	
	
	<script type="text/javascript">
		function Photo(){
			//相像
			var img = document.images[0];
			//隐藏方法
			this.hide = function(){
				img.style.visibility = "hidden";
			} 
			//显示方法
			this.show = function(){
				img.style.visibility = "visible";
			}
		}
	</script>	
		
	<script type="text/javascript">
		var p = new Photo();
		document.getElementById("hide").onclick = function(){
			p.hide();
		}
		document.getElementById("show").onclick = function(){
			p.show();
		}
	</script>

  </body>
</html>
